<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .txt1{
            width: 600px;
            height: 600px;
            background: red;
        }
        .txt2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        .txt3{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="txt1">
        <div class="txt2">
            <div class="txt3">
                 
            </div>
        </div>
    </div>
</body>
</html>
<script>
    // const asd = document.querySelector('asd')
    // asd.onclick = function(){
    //     console.log(this);
    // }
    // var arr = [1,1,2,3,1,4,5]
    function oSort(arr) {
        var result ={};
        var newArr=[];
        for(var i=0;i<arr.length;i++){
            if(!result[arr]) {
                newArr.push(arr)
                result[arr]=1
            }
        }
        return newArr
    }

    
    // console.log(oSort(arr));

    // let arr1 = []
    // for(var i =0;i < arr.length;i++){
    //     for(var j =0;j <= arr1.length;j++){
    //         if(arr1[j] == arr[i]){
    //             arr1.push(arr[i])
    //         }
    //     }
    // }
    // console.log(arr1);
    // let arr = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]
    //     let arr1 = arr.filter((item,index) => {
    //         console.log(item,arr.indexOf(item),index);
    //         return arr.indexOf(item) == index
    //     })
    //     console.log(arr1);





</script>
<script>
    const txt1 = document.querySelector('.txt1')
    const txt2 = document.querySelector('.txt2')
    const txt3 = document.querySelector('.txt3')

    txt1.addEventListener('click',(e) => {
        // e.stopPropagation();
        // e.cancelBubble = true;
        alert('红色')
        // e.stopPropagation()
        // e.preventDefault()
    })
    txt2.addEventListener('click',(e) => {
        e.stopPropagation()
        // e.preventDefault()
        console.log('黄色')
    })
    txt3.addEventListener('click',(e) => {
        // e.stopPropagation();
        // e.cancelBubble = true;
        e.stopPropagation()
        alert('绿色')
        // e.stopPropagation()
        // e.preventDefault()
    })

    //阻止冒泡事件，给最里层那个加 stopPropagation



</script>